<script setup>
import { onMounted, ref, computed } from 'vue'
import { getUserOrder, cancelOrderAPI } from '@/apis/order'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import CartButton from '@/components/CartButton/index.vue'
import { ElMessage } from 'element-plus'
const router = useRouter()

const userStore = useUserStore()

// 订单tab
const tabsList = ref([
	{
		label: '全部订单',
		name: '0'
	},
	{
		label: '待付款',
		name: '1'
	},
	{
		label: '待发货',
		name: '2'
	},
	{
		label: '待收货',
		name: '3'
	},
	{
		label: '已完成',
		name: '5'
	},
	{
		label: '售后订单',
		name: '789'
	}
])

const activeName = ref('0')

// 获取订单列表
const orderList = ref([])
const total = ref(0)
const params = ref({
	status: 0,
	pageNum: 1,
	pageSize: 10
})

const getOrderList = async () => {
	const res = await getUserOrder(params.value)
	orderList.value = res.data.list
	total.value = res.data.total
}

onMounted(() => getOrderList())

const handleClick = (tab) => {
	params.value.status = tab.props.name
	getOrderList()
}
const currentChange = (value) => {
	params.value.pageNum = value
	getOrderList()
}

// 根据状态值判断状态文案
const statusText = computed(() => (status) => {
	let statusName = ''
	switch (status) {
		case 1:
			statusName = '待付款-去付款>'
			break

		case 2:
			statusName = '待发货'
			break

		case 3:
			statusName = '待收货'
			break

		case 4:
			statusName = '待取货'
			break

		case 5:
			statusName = '已完成'
			break

		case 6:
			statusName = '失败'
			break

		case 7:
			statusName = '售后-退款'
			break

		case 8:
			statusName = '售后-同意'
			break

		case 9:
			statusName = '售后-拒绝'
			break

		default:
			''
			break
	}
	return statusName
})

// 根据状态值判断状态的操作按钮
const statusBtn = computed(() => (item) => {
	let btnName = ''
	switch (item.status) {
		case 1:
			btnName = '取消订单'
			break

		// case 2:
		// case 3:
		// 	btnName = '申请售后'
		// 	break

		case 5:
			const isEvaluation = item.orderItems.some((v) => v.isEvaluation == 0)
			if (isEvaluation) btnName = '去评价'
			break

		default:
			btnName = null
			break
	}
	return btnName
})

// 点击订单状态文案
const handleStatusText = (item) => {
	if (item.status == 1) {
		router.push({
			path: '/pay',
			query: {
				id: item.orderId,
				money: item.total
			}
		})
	}
}

// 点击订单状态操作按钮
const handleStatusBtn = (item) => {
	if (item.status == 1) {
		ElMessageBox.confirm('是否确定取消订单？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
			.then(async () => {
				// console.log('item.orderId:', item.orderId)
				await cancelOrderAPI(item.orderId)
				ElMessage({
					type: 'success',
					message: '取消订单成功'
				})
				getOrderList()
			})
			.catch(() => {})
		// } else if (item.status == 2 || item.status == 3) {
		// 	router.push({
		// 		path: '/readyRefund',
		// 		query: {
		// 			item: JSON.stringify(item)
		// 		}
		// 	})
	} else if (item.status == 5) {
		router.push({
			path: '/evaluatione',
			query: {
				item: JSON.stringify(item)
			}
		})
	}
}

// 点击修改个人信息按钮
// 无功能提示
const handleEditInfo = () => {
	router.push({
		path: '/mine'
	})
}
</script>

<template>
	<div class="order">
		<div class="box box-info">
			<div class="info">
				<div class="avatar">
					<img :src="userStore.userInfo.pic" alt="" />
				</div>
				<div class="desc">
					<div class="name">{{ userStore.userInfo.nickName || '暂无' }}</div>
					<div class="mobile">绑定手机号：{{ userStore.userInfo.mobile || '暂无' }}</div>
					<div class="edit" @click="handleEditInfo">修改个人信息&gt;</div>
				</div>
			</div>
			<div class="balance">
				<div class="money">
					<div class="num">{{ userStore.userInfo.bcCount || 0 }}</div>
					<div class="text">瓶盖余额</div>
				</div>
				<div class="money">
					<div class="num">{{ userStore.userInfo.accountBalance ? `&yen;${userStore.userInfo.accountBalance}` : 0 }}</div>
					<div class="text">账户余额</div>
				</div>
			</div>
		</div>
		<div class="box box-order">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane v-for="item in tabsList" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
			</el-tabs>
			<div class="order-list">
				<div class="none" v-if="!orderList.length">暂无订单。</div>
				<template v-else>
					<table>
						<tbody>
							<template v-for="item1 in orderList" :key="item1.orderId">
								<!-- <tr class="shop-title">
									<td :colspan="4"><img src="../../assets/images/order-images/shopLogo2.png" alt="" srcset="" /> {{ item1.shopName }}</td>
								</tr> -->
								<tr v-for="(item2, index2) in item1.orderItems" :key="item2.spuId">
									<td width="35%" class="goods" @click="$router.push(`/orderDetail/${item1.orderId}`)">
										<img :src="item2.imgUrl" alt="" />
										<span class="name">{{ item2.spuName }} - {{ item2.skuName }}</span>
									</td>
									<td width="20%">{{ item1.shopName }}</td>
									<td width="10%">&times;{{ item2.count }}</td>
									<td width="10%">&yen;{{ (item2.spuTotalAmount / 100).toFixed(2) }}</td>
									<td width="30%" v-if="index2 == 0" :rowspan="item1.orderItems.length" class="status">
										<span class="status-btn" @click="$router.push(`/orderDetail/${item1.orderId}`)">订单详情</span>
										<span class="line">|</span>
										<span class="status-btn" :class="'status-btn' + item1.status" v-if="statusBtn(item1)" @click="handleStatusBtn(item1)">{{
											statusBtn(item1)
										}}</span>
										<span class="line" v-if="statusBtn(item1)">|</span>
										<span class="status-text" :class="'status-text' + item1.status" @click="handleStatusText(item1)">{{ statusText(item1.status) }}</span>
									</td>
								</tr>
								<tr class="underline">
									<td :colspan="4"></td>
								</tr>
							</template>
						</tbody>
					</table>
					<el-pagination
						:hide-on-single-page="true"
						background
						layout="prev, pager, next"
						:total="total"
						:page-size="params.pageSize"
						@current-change="currentChange"
					/>
					<!-- </div> -->
				</template>
			</div>
		</div>
		<CartButton />
	</div>
</template>

<style scoped lang="scss">
.order {
	background-color: #f4f4f4;
	padding: 0 160px 30px;
	min-height: calc(100vh - 151px);
	.box {
		padding: 30px;
		background-color: #fff;
	}
	.box-info {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.info {
			display: flex;
			align-items: center;
			.avatar {
				margin-right: 16px;
				width: 120px;
				height: 120px;
				background: #d9d9d9;
				border-radius: 50%;
			}
			.desc {
				.name {
					font-size: 24px;
					color: #333333;
					line-height: 36px;
				}
				.mobile {
					margin: 14px 0 28px 0;
					font-size: 14px;
					color: #999999;
					line-height: 21px;
				}
				.edit {
					cursor: pointer;
					font-size: 14px;
					color: $xtxColor;
					line-height: 21px;
				}
			}
		}
		.balance {
			display: flex;
			align-items: end;
			.money {
				text-align: center;
				margin-right: 120px;
				.num {
					margin-bottom: 13px;
					font-weight: 700;
					font-size: 24px;
					color: #333333;
					line-height: 36px;
				}
				.text {
					font-size: 14px;
					color: #999999;
					line-height: 21px;
				}
			}
		}
	}
	.box-order {
		width: 100%;
		margin-top: 30px;
		.order-list {
			.none {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 200px;
				color: #999;
			}
		}
	}

	table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		.shop-title {
			font-size: 18px;
			color: #333333;
			line-height: 27px;
			img {
				width: 32px;
				height: 32px;
				margin-right: 10px;
			}
		}
		tr {
			th {
				background: #f5f5f5;
				font-weight: normal;
			}

			td,
			th {
				text-align: center;
				padding: 24px 0;
				font-size: 14px;
				color: #333333;
				line-height: 21px;

				img {
					width: 50px;
					height: 50px;
				}

				&:last-child {
					text-align: right;
				}

				.num {
					padding: 11px 0 21px;
					font-weight: 700;
					font-size: 24px;
					color: $xtxColor;
					line-height: 36px;
				}
			}

			td:nth-child(1) {
				text-align: left !important;
				padding-right: 30px;
			}
			td:nth-child(3) {
				text-align: right !important;
				padding-right: 50px;
			}
			td:nth-child(4) {
				text-align: left !important;
			}
			.status {
				padding-right: 30px;
				font-size: 14px;
				color: #060709;
				line-height: 21px;
				.line {
					display: inline-block;
					// margin: 0 15px;
				}
				.status-btn {
					padding: 20px 15px;
					cursor: pointer;
				}
				.status-btn1 {
					padding: 20px 15px;
					color: #333333;
				}
				.status-text {
					padding: 20px 0 20px 15px;
				}
				.status-text1 {
					padding: 20px 0 20px 15px;
					cursor: pointer;
					font-weight: 700;
					color: $xtxColor;
				}
				.status-btn:hover {
					color: $xtxColor;
				}
				.status-btn1:hover {
					color: $xtxColor;
				}
			}
		}
		.underline {
			border-bottom: 1px solid #f4f4f4;
			// border-bottom: 1px solid #000;
			td {
				padding: 0;
			}
		}

		tr:last-of-type {
			border-bottom: 0;
		}
	}
	.goods {
		cursor: pointer;
		width: 100%;
		display: flex;
		align-items: center;
		text-align: left;
		img {
			width: 50px;
			height: 50px;
			margin-right: 20px;
		}

		.name {
			width: 200px;
			font-size: 14px;
			color: #333333;
			line-height: 21px;
		}
	}
	.goods:hover {
		.name {
			color: $xtxColor;
		}
	}
	.el-pagination {
		display: flex;
		justify-content: end;
	}
}
:deep(.el-tabs) {
	.is-active {
		color: $xtxColor;
	}
	.el-tabs__item {
		padding: 0 24px;
		font-size: 14px;
		font-weight: 700;
		line-height: 21px;
	}
	.el-tabs__item:hover {
		color: $xtxColor;
	}
	.el-tabs__active-bar {
		background-color: $xtxColor;
	}
	.el-tabs__nav-wrap::after {
		display: none;
	}
}
</style>